import type { DeckDetail } from '/@/api/currentDeck/model/deckModel';
import { defineComponent, reactive, ref } from 'vue';
import { find } from 'lodash-es';
import { awaitWrap } from '/@/utils';
import { DeckDetailApi } from '/@/api/currentDeck/deck';

import('./PCardsPage.less');

export default defineComponent({
  name: 'PCardsPage',
  props: {
    deckId: {
      type: Number as PropType<number>,
      required: true,
    },
  },
  setup(props) {
    const deckDetailInfo = reactive<DeckDetail>({} as DeckDetail);
    const loadingState = ref(true);
    const getDetail = async () => {
      const [error, data] = await awaitWrap(DeckDetailApi({ deck_id: Number(props.deckId) }));
      if (error) {
        return false;
      }
      const result = data as DeckDetail;
      for (const item in result) {
        deckDetailInfo[item] = result[item];
      }
      loadingState.value = false;
    };
    getDetail();

    let BNum = 0;
    let NNum = 0;
    let XNum = 0;

    const BaokeMengCard = () => {
      const rows = 19;
      if (loadingState.value) {
        return null;
      }
      const { deck_info } = deckDetailInfo;
      const groupDate = find(deck_info, { group_name: '宝可梦卡' });
      const { card_list } = groupDate!;
      const TrArray: VueNode = [];
      BNum = 0;
      for (let i = 0; i < rows; i++) {
        if (card_list[i]) {
          BNum += card_list[i].number!;
          TrArray.push(
            <tr>
              <td class={'small'}>{card_list[i].name}</td>
              <td>{card_list[i].series_abbr}</td>
              <td class={'small'}>{card_list[i].card_no}</td>
              <td>{card_list[i].number}</td>
            </tr>
          );
        } else {
          TrArray.push(
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          );
        }
      }

      return (
        <div class={'baokemeng'} style={{ marginBottom: '25px' }}>
          <table class={'card-table'}>
            <tr class={'table-title'}>
              <td>宝可梦卡</td>
              <td>系列号</td>
              <td>卡牌编号</td>
              <td>使用张数</td>
            </tr>
            {TrArray}
            <tr class={'table-footer'}>
              <td colspan={2}></td>
              <td>合计：</td>
              <td>{BNum || ''}</td>
            </tr>
          </table>
        </div>
      );
    };

    const NengLiangCard = () => {
      const rows = 8;
      if (loadingState.value) {
        return null;
      }
      const { deck_info } = deckDetailInfo;
      const groupDate = find(deck_info, { group_name: '能量卡' });
      const { card_list } = groupDate!;
      const TrArray: VueNode = [];
      NNum = 0;
      for (let i = 0; i < rows; i++) {
        if (card_list[i]) {
          NNum += card_list[i].number!;
          TrArray.push(
            <tr>
              <td class={'small'}>{card_list[i].name}</td>
              <td>{card_list[i].number}</td>
            </tr>
          );
        } else {
          TrArray.push(
            <tr>
              <td></td>
              <td></td>
            </tr>
          );
        }
      }
      return (
        <div class='nengliang'>
          <table class={'card-table'}>
            <tr class={'table-title'}>
              <td style={{ height: 'auto' }}>能量卡</td>
              <td style={{ height: 'auto' }}>使用张数</td>
            </tr>
            {TrArray}
            <tr class={'table-footer'}>
              <td class={'!text-right'}>合计：</td>
              <td>{NNum || ''}</td>
            </tr>
          </table>
        </div>
      );
    };

    const XunLianJiaCard = () => {
      const rows = 28;
      if (loadingState.value) {
        return null;
      }
      const { deck_info } = deckDetailInfo;
      const groupDate = find(deck_info, { group_name: '训练家卡' });
      const { card_list } = groupDate!;
      const TrArray: VueNode = [];
      XNum = 0;
      for (let i = 0; i < rows; i++) {
        if (card_list[i]) {
          XNum += card_list[i].number!;
          TrArray.push(
            <tr>
              <td class={'small'}>{card_list[i].name}</td>
              <td>{card_list[i].number}</td>
            </tr>
          );
        } else {
          TrArray.push(
            <tr>
              <td></td>
              <td></td>
            </tr>
          );
        }
      }
      return (
        <div class='xunlianjia absolute right-0 top-0'>
          <table class={'card-table w-full'}>
            <tr class={'table-title'}>
              <td>训练家卡</td>
              <td>使用张数</td>
            </tr>
            {TrArray}
            <tr class={'table-footer'}>
              <td class={'!text-right'}>合计：</td>
              <td>{XNum || ''}</td>
            </tr>
          </table>
        </div>
      );
    };

    const SumArea = () => {
      if (loadingState.value) {
        return null;
      }
      const sum = BNum + NNum + XNum;
      return (
        <div class={'card-sum-area absolute bottom-0 right-0 flex'}>
          <div>卡牌总计：</div>
          <div>{sum || ''}</div>
        </div>
      );
    };

    return () => (
      <div class={'spread-page pcards-sheet-page'}>
        <h1 class={'page-title'}>卡组登记表</h1>
        <table class={'name-table'}>
          <tr>
            <td class={'short'}>姓名</td>
            <td></td>
            <td class={'short'}>日期</td>
            <td></td>
          </tr>
          <tr>
            <td class={'short'}>套牌名称</td>
            <td colspan={3}></td>
          </tr>
        </table>
        <div class={'card-content relative'}>
          <BaokeMengCard />
          <NengLiangCard />
          <XunLianJiaCard />
          <SumArea />
        </div>
      </div>
    );
  },
});
